<template>
    <li class="el-timeline-item">
        <div class="el-timeline-item__tail"></div>

        <div v-if="!$slots.dot"
             class="el-timeline-item__node"
             :class="[
        `el-timeline-item__node--${size || ''}`,
        `el-timeline-item__node--${type || ''}`
      ]"
             :style="{
        backgroundColor: color
      }"
        >
            <i v-if="icon"
               class="el-timeline-item__icon"
               :class="icon"
            ></i>
        </div>
        <div v-if="$slots.dot" class="el-timeline-item__dot">
            <slot name="dot"></slot>
        </div>

        <div class="el-timeline-item__wrapper">
            <div v-if="!hideTimestamp && placement === 'top'"
                 class="el-timeline-item__timestamp is-top">
                {{timestamp}}
            </div>

            <div class="el-timeline-item__content">
                <slot></slot>
            </div>

            <div v-if="!hideTimestamp && placement === 'bottom'"
                 class="el-timeline-item__timestamp is-bottom">
                {{timestamp}}
            </div>
        </div>
    </li>
</template>

<script>
    export default {
        name: 'ElTimelineItem',

        inject: ['timeline'],

        props: {
            timestamp: String,

            hideTimestamp: {
                type: Boolean,
                default: false
            },

            placement: {
                type: String,
                default: 'bottom'
            },

            type: String,

            color: String,

            size: {
                type: String,
                default: 'normal'
            },

            icon: String
        }
    };
</script>
